<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!-- <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./css/vant.css" />
    <script src="./js/amfe-flexible.js"></script>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?326606a7db35ff097652dee25164bbd3";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <!-- <script src="./js//variable.js"></script> -->

    <!-- 引入样式文件 -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> -->
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> -->
    <title>分享福利</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #DEFAF8;
        }

        .app {
            background-color: #FDE4EC;

        }

        .con {
            width: 10rem;
            font-size: 0;
            margin: 0 auto;
            background-color: #DEFAF8;
            overflow: hidden;
        }

        /* .header {
            text-align: center;
            margin-top: .55rem;
        }

        .header img {
            width: 9.35rem;
            height: 4.84rem;

        } */
        .header {
            text-align: center;
            margin: 0 auto;
            margin-top: .55rem;
            background-image: url('https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071301.png');
            background-size: 100% 100%;
            width: 9.35rem;
            height: 15.17rem;
            overflow: hidden;
            margin-bottom: 2.12rem;
        }

        .con-sec {
            margin: 0 auto;
            /* height: 3rem; */
            width: 8.7rem;
            background: #F6F6F6;
            overflow: hidden;
            box-sizing: border-box;
            padding-bottom: .36rem;
        }

        .con-sec .tips {
            margin: 0 auto;
            margin-top: .46rem;
            background-image: url('https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071202.png');
            width: 7.57rem;
            height: 2.12rem;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            line-height: 2.12rem;
        }

        .tips-left {

            font-size: .56rem;
            font-weight: 500;
            color: #08D8CA;
            text-align: center;
            margin-left: .51rem;
        }

        .tips-right {
            font-size: .48rem;
            font-weight: 500;
            color: #121212;
            text-align: center;
            margin-right: .63rem;
        }

        .end {
            margin: 0 auto;
            width: 8.7rem;
            background-color: #fff;
            /* height: 3rem; */
            margin-bottom: 2.5rem;
            overflow: hidden;
            margin-top: 11.28rem;
        }

        .btn {
            width: 6.16rem;
            height: 1.00rem;
            background: #08D8CA;
            border-radius: .16rem;
            text-align: center;
            line-height: 1.00rem;
            font-size: .37rem;
            color: #fff;
            margin: 0 auto;
            margin-top: 1rem;
        }

        .btn2 {
            font-size: .37rem;
            font-weight: 400;
            color: #08D8CA;
            margin: 0 auto;
            margin-top: .26rem;
            text-align: center;
            margin-bottom: .5rem;
        }

        .rules_popup {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: fixed;
            z-index: 999;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            /* background-color: red; */

        }

        .pop-con {
            width: 8.55rem;
            height: 5.09rem;
            background: #FFFFFF;
            border-radius: .2rem;
            position: relative;
        }

        .pop-close {
            position: absolute;
            width: .33rem;
            height: .33rem;
            top: .48rem;
            right: .63rem;
        }

        .pop-size {
            /* width: 5.13rem; */
            /* height: 40px; */
            font-size: .43rem;
            font-weight: 400;
            color: #292828;
            /* line-height: 93px; */
            margin-top: 1.93rem;
            text-align: center;
        }

        .pop-btn {
            width: 4.72rem;
            height: 1.00rem;
            background: #08D8CA;
            border-radius: .13rem;
            margin: 0 auto;
            margin-top: .93rem;
            text-align: center;
            color: #fff;
            font-size: .43rem;
            line-height: 1rem;
        }

        .pop-size1 {
            margin-top: 1.53rem;
            font-size: .43rem;
            text-align: center;
        }

        .pop-size2 {
            font-size: .43rem;
            text-align: center;
            margin-top: .3rem;
        }

        .pop-success {
            width: 1.87rem;
            height: 1.87rem;
            /* margin: 0 auto; */
            margin-left: 3.36rem;
            margin-top: 1.08rem;

        }

        .pop-size3 {
            font-size: .35rem;
            font-weight: 400;
            color: #929292;
            text-align: center;
            margin-top: .25rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="con">
            <div class="header">
                <!-- <img src="https://tidyimages.oss-cn-hangzhou.aliyuncs.com/webMiNi/2022071201.png" alt=""> -->
                <div class="end">
                    <div class="btn" @click="get">
                        一键领取
                    </div>
                    <div class="btn2" @click="goNext">
                        立即购买>
                    </div>
                </div>
            </div>
            <!-- <div class="con-sec">
                <div class="tips" v-for="item in 3" ::key="item">
                    <div class="tips-left">
                        满100减30
                    </div>
                    <div class="tips-right">
                        洗衣券 X2
                    </div>
                </div>
            </div> -->

        </div>
        <div class="rules_popup" v-show="getFlag0" id="saveImg">
            <div class="pop-con">
                <img src="./img/closeIcon.png" class="pop-close" alt="" @click="getFlag0=false">
                <div class="pop-size">
                    不可领取自己分享的优惠券
                </div>
                <div class="pop-btn" @click="getFlag0=false">我知道了</div>
            </div>
        </div>


        <div class="rules_popup" v-show="getFlag1" id="saveImg">
            <div class="pop-con">
                <img src="./img/closeIcon.png" class="pop-close" alt="" @click="getFlag1=false">
                <div class="pop-size1">
                    您已经是会员了
                </div>
                <div class="pop-size2">
                    不能重复领取新人优惠
                </div>
                <div class="pop-btn" style="margin-top:.67rem ;" @click="getFlag1=false">我知道了</div>
            </div>
        </div>

        <div class="rules_popup" v-show="getFlag2" id="saveImg">
            <div class="pop-con" style="height: 7.2rem;">
                <img src="./img/closeIcon.png" class="pop-close" alt="" @click="getFlag2=false">
                <img class="pop-success" src="./img/successIcon.png" alt="">

                <div class="pop-size" style="margin-top: .56rem;">
                    你已经成功领取 <span style="color:#08D8CA;"> 29元洗鞋券</span>
                </div>
                <div class="pop-size3">(已放入您{{phone.substr(0, 3) + '****' + phone.substr(7)}}的账户)</div>
                <div class="pop-btn" style="margin-top: .59rem;" @click="getFlag2=false">我知道了</div>
            </div>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    phone: localStorage.getItem('phone') || '18344732987',
                    // phoneNum: '18336732987',
                    getFlag0: false,
                    getFlag1: false,
                    getFlag2: false,
                    recommandStatus: localStorage.getItem('recommandStatus')
                }
            },
            mounted() {
                // // 调用函数组件，弹出一个 Toast
                // vant.Toast('提示');
                // let url = 'https://m.24tidy.com/login.html?islogin=islogin&recommandId=123'
                // console.log(url, 'msg');
                let obj = this.getParams()
                // let recommandId = localStorage.getItem('recommandId')
                localStorage.setItem('recommandId',obj.recommandId)
                if (!localStorage.getItem('recommandStatus')) {
                    vant.Toast.fail('请先登录');
                    setTimeout(() => {
                        window.location.href = `https://m.24tidy.com/login.html?islogin=islogin&recommandId=${obj.recommandId || null}`;
                    }, 2000);
                    return
                }


            },
            computed: {
            },
            watch: {
            },
            methods: {
                //写cookies
                setCookie(c_name, value, expiredays) {
                    var exdate = new Date();
                    exdate.setDate(exdate.getDate() + expiredays);
                    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
                },
                DelCookie(name) {
                    let _this = this
                    var exp = new Date();
                    exp.setTime(exp.getTime() - 1);
                    var cval = _this.getCookie(name);
                    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
                },
                getCookie(cookie_name) {
                    var allcookies = document.cookie;
                    //索引长度，开始索引的位置
                    var cookie_pos = allcookies.indexOf(cookie_name);


                    // 如果找到了索引，就代表cookie存在,否则不存在
                    if (cookie_pos != -1) {
                        // 把cookie_pos放在值的开始，只要给值加1即可
                        //计算取cookie值得开始索引，加的1为“=”
                        cookie_pos = cookie_pos + cookie_name.length + 1;
                        //计算取cookie值得结束索引
                        var cookie_end = allcookies.indexOf(";", cookie_pos);


                        if (cookie_end == -1) {
                            cookie_end = allcookies.length;


                        }
                        //得到想要的cookie的值
                        var value = unescape(allcookies.substring(cookie_pos, cookie_end));
                    }
                    return value;
                },
                getParams(url) {
                    var theRequest = new Object();
                    if (!url)
                        url = location.href;
                    if (url.indexOf("?") !== -1) {
                        var str = url.substr(url.indexOf("?") + 1) + "&";
                        var strs = str.split("&");
                        for (var i = 0; i < strs.length - 1; i++) {
                            var key = strs[i].substring(0, strs[i].indexOf("="));
                            var val = strs[i].substring(strs[i].indexOf("=") + 1);
                            theRequest[key] = val;
                        }
                    }
                    return theRequest;
                },
                get() {
                    // 0已经是会员 1 已经领取 2不可领取自己
                    if (this.recommandStatus == 2) {
                        this.getFlag0 = true
                    }
                    else if (this.recommandStatus == 0) {
                        this.getFlag1 = true
                    }
                    else if (this.recommandStatus == 1) {
                        this.getFlag2 = true
                    }

                },
                goNext() {
                    window.location.href = `https://m.24tidy.com/washIndex.html`;
                }
            },
        });
        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);

    </script>
</body>

</html>